@import '../index.less';

.new-classify {
    .element;
    width: 100%;
    height: 35px;
    line-height: 35px;
    color: #888;
    font-size: 13px;
    background-color: #f2f2f2;
    overflow: hidden;

    ul {
        height: 50px;
        width: 100%;
        white-space: nowrap;
        text-decoration: inherit;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .second-mode {
        .item {
            min-width: 71px;
            padding: 0;

            &.selected {
                color: rgb(61, 183, 248);
            }
        }

        .mode-icon {
            min-width: 40px !important;
            width: 40px;
            position: absolute;
            right: 0;
            top: 0;

            .icon-container {
                display: inline-block;
                width: 17px;
                height: 17px;
                font-size: 14px;
                vertical-align: middle;
                text-indent: 0;
                text-decoration: none;
                text-align: center;
            }
        }
    }

    .item {
        position: relative;
        display: inline-block;
        text-align: center;
        text-decoration: inherit;
        vertical-align: top;
        padding: 0 18px 0 10px;

        .triangle {
            position: absolute;
            right: 7px;
            top: 50%;
            border-left: 3px solid transparent;
            border-top: 5px solid #666;
            border-right: 3px solid transparent;
            transform: translateY(-50%);
        }

        .triangle2 {
            position: absolute;
            top: 46%;
            right: 7px;
            width: 5px;
            height: 5px;
            padding: 0;
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
            transform: translateY(-50%) rotate(45deg);
        }
    }

    .new-classify-second {
        .divide-line {
            position: absolute;
            right: 0;
            top: 15%;
            border-right: 1px solid #ccc9c9;
            height: 70%;
        }
    }

    .type-1 {
        overflow: hidden;

        &.mode-1 {
            .selected {
                span {
                    padding: .4em;
                    border-radius: .4em;
                    background-color: rgb(61, 183, 248);
                    color: #fff;
                }
            }
        }

        .underLine {
            width: 100%;
            height: 2px;
            background: #63ccfe;
            position: absolute;
            bottom: 0;
            display: block;
            transform: translateX(-50%);
            left: 50%;
            padding: 0 !important;
        }
    }

    .type-2 {
        overflow: hidden;
    }
}